
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>实时监控</title>
</head>
<link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/css/layui.css" media="all">
<style>
    .change_camera_direction{
        text-align: center;
        position: absolute;
        top: 8%;
        width: 200px;
        height: 200px;
    }
    .change_camera_direction .camera_title{
        color: white;
        font-size: 15px;
        margin: 5% auto;
    }
    .direction_content{
        width: 100%;
        height: 70%;
        position: relative;
    }
    .direction_div{
        position:relative;
        width: 30px;
        height: 30px;
    }
    .direction_div img{
        width: 100%;
        height:  100%;
    }
    /*left*/
    .left_direction {
        top: 5%;
        left: 20%;
    }
    /*bottom*/
    .bottom_direction{
        top:5%;
        left: 40%;
    }
    /*right*/
    .right_direction{
        top: -39%;
        left: 61%;
    }
    /*top*/
    .top_direction{
        top: 2%;
        left: 40%;
    }
</style>
<body>
<%--<video--%>
<%--id="myPlayer"--%>
<%--autoplay--%>
<%--src=""--%>
<%--controls--%>
<%--playsInline--%>
<%--webkit-playsinline--%>
<%-->--%>
<%--</video>--%>
<div class="layui-col-xs12" style="color:#104E8B;">
    <div class="layuiadmin-card-text" style="color:#104E8B;" style="float: left">
        <video
                id="myPlayer"
                autoplay
                src=""
                controls
                width="1260"
                height="695"
                playsInline
                webkit-playsinline
        >
        </video>
        <%--<button  onclick="control(0)" type="button" class="layui-btn layui-btn-normal layui-btn-sm">↑</button>--%>
        <%--<button onclick="control(1)" type="button" class="layui-btn layui-btn-normal layui-btn-sm">↓</button>--%>
        <%--<button  onclick="control(2)" type="button" class="layui-btn layui-btn-normal layui-btn-sm">←</button>--%>
        <%--<button onclick="control(3)" type="button" class="layui-btn layui-btn-normal layui-btn-sm">→</button>--%>
        <%--<button onclick="stop()"  type="button" class="layui-btn layui-btn-normal layui-btn-sm">停止转动</button>--%>
    </div>


</div>
<div class="change_camera_direction" style="float: right">
    <div class="camera_title" style="color: #000">摄像头方向控制</div>
    <div class="direction_content">
        <div class="direction_div top_direction">
            <button  onclick="control(0)" type="button" class="layui-btn layui-btn-normal layui-btn-sm">↑</button>
        </div>
        <div class="direction_div left_direction">
            <button  onclick="control(2)" type="button" class="layui-btn layui-btn-normal layui-btn-sm">←</button>
        </div>
        <div class="direction_div bottom_direction">
            <button onclick="control(1)" type="button" class="layui-btn layui-btn-normal layui-btn-sm">↓</button>
        </div>
        <div class="direction_div right_direction">
            <button onclick="control(3)" type="button" class="layui-btn layui-btn-normal layui-btn-sm">→</button>
        </div>
    </div>
</div>
<%--<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"--%>
<%--poster="http://video-js.zencoder.com/oceans-clip.png"--%>
<%--data-setup="{}">--%>

<%--<source src="https://hls01open.ys7.com/openlive/8c24ac1257c8434685ca7a0c989ae37f.hd.m3u8" type='application/x-mpegURL' />--%>
<%--</video>--%>
<script src="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/layui.all.js"></script>
<script src="<%=request.getContextPath()%>/huazhi/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="<%=request.getContextPath()%>/huazhi/js/ezuikit.js"></script>
<%--<script type="text/javascript">--%>
<%--var myPlayer = videojs('example_video_1');--%>
<%--videojs("example_video_1").ready(function(){--%>
<%--var myPlayer = this;--%>
<%--myPlayer.play();--%>
<%--});--%>
<%--</script>--%>

<script type="text/javascript">

    var serial = ''
    var Token = 'at.djmrc1l76kk8q9r26nvai1w77yc8z99w-1e6jr6wq87-1tbux0a-rqqqnkwgz';
    function child(videotid,videoUrl){
        layui.use(['table', 'form', 'layer','ckplayer'], function () {
            var $ = layui.$
                , table = layui.table
                , form = layui.form
                , layer = layui.layer
                , ckplayer = layui.ckplayer;

            var pNode = $(".layuiadmin-card-text");
            var data={
                deviceSerial:'E42012633',
                channelNo:'1'
            }

            data.deviceSerial=videotid;
            serial  = videotid;
            getToken();
            var myPlayer = $('#myPlayer');
            myPlayer.attr("src", videoUrl);
            myPlayer.attr("height", pNode.height());
            myPlayer.attr("width", pNode.width());
            var player = new EZUIKit.EZUIPlayer('myPlayer');
        });
    }

    var control=function (direction) {
        var data = {}
        data.accessToken = Token;
        data.direction=direction;//控制方式
        data.speed='1';//转动速度
        data.deviceSerial=serial
        data.channelNo=1
        layui.use(['jquery', 'layer'], function(){
            var $ = layui.$
                ,layer = layui.layer;
            $.post('https://open.ys7.com/api/lapp/device/ptz/start',data,function(res){

                if(res.code==200){
                    layer.msg("摄像头移动中，请稍后", {time: 9000});
                    sleep(50);
                    stop();
                }else if(res.code == 10002){
                    getToken();
                }else{

                }
            },'json');
            return false;
        });
    }


    var getToken = function () {
        var  data1 = {appKey:'f9cdc3af74d148d18e12b42bb4298b8b',appSecret:'a16cae3a4495c0b291951dc6efd742fb'};
        layui.use(['jquery', 'layer'], function(){
            var $ = layui.$
                ,layer = layui.layer;
            $.post(' https://open.ys7.com/api/lapp/token/get',data1,function(res){
                if(res.code==200){
                    Token = res.data.accessToken;
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            },'json');
            return false;
        });

    }

    //停止转动
    var stop=function () {
        var data = {}
        data.accessToken = Token;
        data.deviceSerial=serial
        data.channelNo=1
        layui.use(['jquery', 'layer'], function(){
            var $ = layui.$
                ,layer = layui.layer;
            $.post('https://open.ys7.com/api/lapp/device/ptz/stop',data,function(res){
                if(res.code==200){

                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            },'json');
            return false;
        });
    }

    function sleep(n) {
        var start = new Date().getTime();
        //  console.log('休眠前：' + start);
        while (true) {
            if (new Date().getTime() - start > n) {
                break;
            }
        }
        // console.log('休眠后：' + new Date().getTime());
    }


    //   $('#init').click(function () {
    // var url = $('#url').val().trim();

    // 日志
    // player.on('log', log);

    //        function log(str) {
    //            var div = document.createElement('DIV');
    //            div.innerHTML = (new Date()).Format('yyyy-MM-dd hh:mm:ss.S') + JSON.stringify(str);
    //            document.body.appendChild(div);
    //        }
    //        $("#stop").click(function () {
    //            player.stop();
    //        })
    //    });
</script>

</body>
